<template>
  <div class='header'>
      <div class="header-left">左边</div> 
      <div class="header-input">
          输入搜索城市
      </div>
    
      <router-link to="/city">
      <div class="header-right">
          {{this.city}}
          <!-- {{this.doubleCity}} -->
      </div>
      </router-link>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'HomeHeader',
//   props: {
//     city: String
//   }
  //把vuex 里的数据映射到该组件的 City计算属性中
  computed: {
    ...mapState(['city']),
    // ...mapGetters(['doubleCity'])
  }

}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header
      display: flex
      height: 0.86rem
      line-height: .86rem
      background-color: $bgColor
      color: #fff
      .height-left
        width: 0.5rem
        float: left
      .header-input
        flex: 1
        margin:.12rem 0 0 .10rem
        height: .64rem
        line-height: .64rem
        color: #333
        background:#fff
        border-radius:.05rem
      .header-right
        color:#fff;
        width: 1.24rem
        float: right
        text-align: center
</style>
